<template>
	<div class="app-container" style="padding: 0;">
		<div class="dashboard">
			<!-- 第一行 - 主要信息区域 -->
			<div class="dashboard-row top-row">
				<!-- 房源信息与钥匙管理 -->
				<div class="dashboard-card house-overview-card" @click="navigateToRoom">
					<div class="section-header">
						<div class="title-wrapper">
							<i class="el-icon-house"></i>
							<span>房源信息与钥匙管理</span>
						</div>
					</div>
					<div class="card-content">
						<shenfen></shenfen>
					</div>
				</div>

				<!-- 设备电量分布 -->
				<div class="dashboard-card">
					<div class="section-header">
						<div class="title-wrapper">
							<i class="el-icon-warning"></i>
							<span>设备电量分布</span>
						</div>
						<div class="header-actions">
							<span class="panel-subtitle">在线总设备数: {{ totalBatteryDevices }} 台</span>
						</div>
					</div>
					<div class="card-content">
						<!-- 电池电量分布展示 -->
						<div class="battery-dashboard">
							<!-- 电量分布区域 -->
							<div class="battery-distribution">
								<!-- 充足电量 -->
								<div class="battery-item high">
									<div class="battery-visual">
										<div class="battery-icon">
											<div class="battery-body">
												<div class="battery-level" style="width: 80%"></div>
											</div>
											<div class="battery-tip"></div>
										</div>
									</div>
									<div class="battery-details">
										<div class="battery-label">充足电量</div>
										<div class="battery-count">{{ batteryDistribution.high }}台</div>
										<div class="battery-percent">{{ Math.round(batteryDistribution.high / totalBatteryDevices * 100) }}%</div>
									</div>
								</div>

								<!-- 中等电量 -->
								<div class="battery-item medium">
									<div class="battery-visual">
										<div class="battery-icon">
											<div class="battery-body">
												<div class="battery-level" style="width: 45%"></div>
											</div>
											<div class="battery-tip"></div>
										</div>
									</div>
									<div class="battery-details">
										<div class="battery-label">中等电量</div>
										<div class="battery-count">{{ batteryDistribution.medium }}台</div>
										<div class="battery-percent">{{ Math.round(batteryDistribution.medium / totalBatteryDevices * 100) }}%</div>
									</div>
								</div>

								<!-- 较低电量 -->
								<div class="battery-item low">
									<div class="battery-visual">
										<div class="battery-icon">
											<div class="battery-body">
												<div class="battery-level" style="width: 15%"></div>
											</div>
											<div class="battery-tip"></div>
										</div>
									</div>
									<div class="battery-details">
										<div class="battery-label">较低电量</div>
										<div class="battery-count">{{ batteryDistribution.low }}台</div>
										<div class="battery-percent">{{ Math.round(batteryDistribution.low / totalBatteryDevices * 100) }}%</div>
									</div>
								</div>

								<!-- 极低电量 -->
								<div class="battery-item very-low">
									<div class="battery-visual">
										<div class="battery-icon">
											<div class="battery-body">
												<div class="battery-level" style="width: 5%"></div>
											</div>
											<div class="battery-tip"></div>
										</div>
									</div>
									<div class="battery-details">
										<div class="battery-label">极低电量</div>
										<div class="battery-count">{{ batteryDistribution.veryLow }}台</div>
										<div class="battery-percent">{{ Math.round(batteryDistribution.veryLow / totalBatteryDevices * 100) }}%</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 月开门方式统计 -->
				<div class="dashboard-card" >
					<div class="section-header">
						<div class="title-wrapper">
							<i class="el-icon-lock"></i>
							<span>月开门方式统计</span>
						</div>
					</div>
					<div class="card-content">
						<fangshi></fangshi>
					</div>
				</div>
			</div>

			<!-- 第二行 - 辅助信息区域 -->
			<div class="dashboard-row bottom-row">
				<!-- 入住人员性别分布 -->
				<div class="dashboard-card" >
					<div class="section-header">
						<div class="title-wrapper">
							<i class="el-icon-data-analysis"></i>
							<span>入住人员性别分布</span>
						</div>
					</div>
					<div class="card-content">
						<nanvu></nanvu>
					</div>
				</div>
	<!-- 人员监控 -->
				<div class="dashboard-card">
					<div class="section-header">
						<div class="title-wrapper">
							<i class="el-icon-monitor"></i>
							<span>设备在线统计</span>
						</div>
					</div>
					<div class="card-content">
						<wujilu></wujilu>
					</div>
				</div>
				<!-- 校区公告 -->
				<div class="dashboard-card">
					<div class="section-header">
						<div class="title-wrapper">
							<i class="el-icon-bell"></i>
							<span>校区公告</span>
						</div>
						<div class="header-actions">
							<span class="more-link" @click="navigateToNotice">更多 <i class="el-icon-arrow-right"></i></span>
						</div>
					</div>
					<div class="card-content">
						<notice></notice>
					</div>
				</div>


			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import notice from "./lock/home/notice";
	import shenfen from "./lock/home/shenfen";
	import wujilu from "./lock/home/wujilu";
	import fangshi from "./lock/home/fangshi";
	import nanvu from "./lock/home/nanvu";
	import { deviceBatteryDistribution } from '@/api/lock/menu';

	import CountTo from 'vue-count-to'

	export default {
		name: "dashboard",
		components: {
			CountTo,
			notice,
			shenfen,
			wujilu,
			fangshi,
			nanvu
			// PieChart,
			// AppUserChart
		},
		data() {
			return {
				// 版本号
				version: "3.6.0",
				// 图表样式
				myChartStyle: {
					width: "100%",
					height: "350px"
				},
				// 基础数据
				count: 0,
				value: new Date(),
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
				// 设备电量分布数据
				totalBatteryDevices: 0,
				batteryDistribution: {
					high: 0,
					medium: 0,
					low: 0,
					veryLow: 0
				},

				// 房屋统计数据
				totalHouses: 0,
				occupiedHouses: 0,
				vacantHouses: 0,
				maintenanceHouses: 0,

				// 人员统计数据
				totalTenants: 0,
				newTenants: 0,
				expiringSoon: 0,

				// 设备统计数据
				totalLocks: 0,
				onlineLocks: 0,
				offlineLocks: 0,
				malfunctioningLocks: 0,

				// 告警统计数据
				totalAlarms: 0,
				errorReports: 0,
				tamperingAlarms: 0,

				// 房间类型数据
				roomTypeList: [],

				// 人员类型数据
				tenantTypeList: []
			};
		},
		mounted() {
			// this.initRuondEchartsSuShe();
			// this.initRuondEchartsUser();

			// this.initRuondEchartsFuWu();
			// this.initRuondEchartsWanGui();
			// this.initRuondEchartsAlert();




		},
		created() {
			// this.getRoomTypeCount();
			// this.getStudentCount();
			// this.getRoomSuSheCount();

			// this.getInfo();
			// this.getLockCount();
			// this.getUserCount();
			// this.getVXUserCount();
			// this.getPartnerCount();
			this.initData();
			this.getBatteryDistribution();
		},
		methods: {
			// 初始化数据
			initData() {
				// 这里可以添加数据初始化的代码
				// 例如调用API获取数据等
			},

			// 获取设备电量分布数据
			getBatteryDistribution() {
				deviceBatteryDistribution({}).then(response => {
					if (response.code === 200) {
						const data = response.data || {};
				this.batteryDistribution = {
							veryLow: data.veryLow || 0,
							low: data.low || 0,
							medium: data.medium || 0,
							high: data.high || 0
						};
						// 计算总设备数
						this.totalBatteryDevices = this.batteryDistribution.veryLow + 
							this.batteryDistribution.low + 
							this.batteryDistribution.medium + 
							this.batteryDistribution.high;
					} else {
						console.error("获取设备电量分布数据失败:", response);
					}
				}).catch(error => {
					console.error("获取设备电量分布数据出错:", error);
				});
			},

			// 饼图自动轮播
			handleChartLoop(option, myChart) {
				if (!myChart) return;

				let currentIndex = 0; // 当前高亮图形在饼图数据中的下标
				let changePieInterval = setInterval(selectPie, 3000); // 设置自动切换高亮图形的定时器

				// 取消所有高亮并高亮当前图形
				function highlightPie() {
					// 遍历饼图数据，取消所有图形的高亮效果
					for (var idx in option.series[0].data) {
						myChart.dispatchAction({
							type: 'downplay',
							seriesIndex: 0,
							dataIndex: idx
						});
					}
					// 高亮当前图形
					myChart.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: currentIndex
					});
				}

				// 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
				myChart.on('mouseover', (params) => {
					clearInterval(changePieInterval);
					currentIndex = params.dataIndex;
					highlightPie();
				});

				// 用户鼠标移出时，重新开始自动切换
				myChart.on('mouseout', () => {
					if (changePieInterval) {
						clearInterval(changePieInterval);
					}
					changePieInterval = setInterval(selectPie, 3000);
				});

				// 高亮效果切换到下一个图形
				function selectPie() {
					var dataLen = option.series[0].data.length;
					currentIndex = (currentIndex + 1) % dataLen;
					highlightPie();
				}
			},
			/** 人员图 */
			userExchar() {
				const mainExcharList = this.userTypeCountList
				// [{
				//     value: 1048,
				//     name: '学生'
				//   },
				//   {
				//     value: 735,
				//     name: '教职工'
				//   }
				// ]
				const option = {
					title: {
						text: '', // 设置标题文本
						left: 'left', // 标题水平居中
						textStyle: { // 标题文本样式
							color: '#00aaff', // 标题颜色
							fontSize: 15 // 标题字体大小
						}
					},
					//鼠标移动时展示的数据
					tooltip: {
						trigger: 'item',
					},
					legend: {
						orient: 'vertical',
						right: '0%',
						top: 'center',
						itemWidth: 30,
						itemHeight: 30,
						textStyle: {
							color: '#000000'
						},

						//格式化数据，显示右边多标签的数值
						formatter(name) {
							let target;
							mainExcharList.forEach((item) => {
								if (item.name === name) {
									target = item;
								}
							});
							return `${name} ${target.value}`;
						},
					},
					series: [{
						// name: 'Access From',
						type: 'pie',
						radius: '70%',
						left: "-20%",
						data: mainExcharList,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
						}
					}]
				}
				this.myRoundChart = echarts.init(document.getElementById("main"));
				this.myRoundChart.setOption(option);
			},
			/** 建筑图 */
			initRuondEcharts() {
				const option = {
					// title: false,
					//显示右边多标签的数值
					tooltip: {
						trigger: 'item',
					},
					legend: {
						orient: 'vertical',
						right: '0',
						top: '30',
						itemWidth: 15,
						itemHeight: 15,
						textStyle: {
							color: '#000000'
						},

						//格式化数据，显示右边多标签的数值，和中间数值
						formatter: function(name) {
							var data = option.series[0].data
							var total = 0
							var tarValue
							for (var i = 0; i < data.length; i++) {
								total += data[i].value
								if (data[i].name === name) {
									tarValue = data[i].value
								}
							}
							var p = ((tarValue / total) * 100).toFixed(2)
							// return `${name}  ${p}%`
							return `${name}  ${tarValue}`
						}

					},

					series: [{
						// name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						left: "-20%",
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 23,
								fontWeight: 'bold'
							}
						},
						label: {
							show: false,
							position: 'center',
							formatter: '{b_style|{b}}\n{c_style|{c}}', //这里是显示图表中间轮询展示的数据
							rich: {
								b_style: {
									fontSize: 23
								},
								//注释掉就可以显示value值
								// c_style: {
								//   color: '#fff',
								//   fontSize: 23,
								//   padding: [10, 0, 10, 0]
								// }
							}
						},

						labelLine: {
							show: false
						},
						// data: [{
						//     value: 335,
						//     name: '教室'
						//   },
						//   {
						//     value: 310,
						//     name: '宿舍'
						//   },
						//   {
						//     value: 234,
						//     name: '琴室'
						//   },
						//   {
						//     value: 135,
						//     name: '实验室'
						//   }
						// ],
						data: this.roomTypeList,
					}]
				};
				this.myRoundChart = echarts.init(document.getElementById("myruondchart"));
				this.myRoundChart.setOption(option);
				// this.handleChartLoop(option, this.myRoundChart)
			},

			/** 宿舍管理 */
			initRuondEchartsSuShe() {
				const list = this.roomSuSheList
				// [{
				//     name: "可入住",
				//     value: "114",
				//   },
				//   {
				//     name: "满员",
				//     value: "881",
				//   },
				//   {
				//     name: "不可入住",
				//     value: " 114",
				//   },
				//   {
				//     name: "锁房",
				//     value: "234",
				//   }
				// ];

				const datas = [
					"可入住",
					"满员",
					"不可入住",
					"锁房"
				];
				const values = [
					114, 881, 114, 234
				];
				const option = {
					backgroundColor: "#ffffff",
					xAxis: {
						// max: 76317,
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
					},
					grid: {
						containLabel: true,
						left: "3%",
						top: "3%",
						right: "10%",
						bottom: "3%",
					},
					yAxis: [{
						data: datas,
						inverse: true,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14,
								color: "#717C8E",
							},
						},
					}, ],
					series: [{
							//内
							type: "bar",
							barWidth: 20,
							// legendHoverLink: false,
							// symbolRepeat: true,
							silent: true,
							itemStyle: {
								color: "transparent",
								// borderWidth:2
								borderColor: "transparent",
							},
							data: list,
							z: 1,
							// animationEasing: 'elasticOut',
						},
						{
							type: "pictorialBar",
							animationDuration: 0,
							symbolRepeat: "fixed",
							symbolMargin: "20%",
							symbol: "rect",
							symbolSize: [5, 20],
							symbolMargin: 2,
							// symbolBoundingData: 2000,
							itemStyle: {
								normal: {
									color: "transparent",
								},
							},
							label: {
								normal: {
									show: true,
									position: "right",
									offset: [0, 2],
									textStyle: {
										color: "#717C8E",
										fontSize: 14,
									},
								},
							},
							data: this.roomSuSheList,
							z: 0,
							animationEasing: "elasticOut",
						},
						{
							//分隔
							type: "pictorialBar",
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "#26C5A2", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "#8EE9A9", // 100% 处的颜色
											},
										],
										false
									),
								},
							},
							symbolRepeat: "fixed",
							symbolMargin: 1,
							symbol: "rect",
							symbolClip: true,
							symbolSize: [3, 20],
							symbolPosition: "start",
							// symbolOffset: [0, 0],
							// symbolBoundingData: 2000,
							data: list,
							z: 2,
							animationEasing: "elasticOut",
						},
					],
				};

				this.myRoundChart = echarts.init(document.getElementById("myruondchartSuShe"));
				this.myRoundChart.setOption(option);
				// this.handleChartLoop(option, this.myRoundChart)
			},
			//查询建筑房间类型数量
			getRoomTypeCount() {
				selectRoomTypeCount().then(response => {
					this.roomTypeList = response.rows.map(item => ({
						name: item.roomTypeName,
						value: item.count
					}));

					//初始化统计图
					this.initRuondEcharts();
				})
			},
			//查询宿舍管理
			getRoomSuSheCount() {
				selectRoomSuSheCount().then(response => {
					this.roomSuSheList = response.rows.map(item => ({
						name: item.roomStatus === 0 ? '可入住' : item.roomStatus === 1 ? '不可入住' : item
							.roomStatus === 2 ?
							'满员' : item.roomStatus === 3 ? '锁房' :
							'未知', // 如果roomStatus不是0, 1, 2, 3中的任何一个，则标记为未知
						value: item.count
					}));
					console.log("输出roomSuSheList：", this.roomSuSheList)
					//初始化统计图
					this.initRuondEchartsSuShe();
				})
			},
			//查询人员数量
			getStudentCount() {
				selectStudentCount().then(response => {
					this.userTypeCountList = response.rows.map(item => ({
						name: item.accessUser === 0 ? '学生' : '教职工',
						value: item.count
					}));
					console.log("输出userTypeCount：", this.userTypeCountList)
					//初始化统计图
					this.userExchar();
				})
			},
			load() {
				this.count += 2
			},
			goTarget(href) {
				window.open(href, "_blank");
			},
			handleSetLineChartData(type) {

			},
			getInfo() {
				this.loading = true;
				info().then(response => {
					this.current = response.data.current;
					this.totalRecharge = response.data.totalRecharge;
					this.rechargeToday = response.data.rechargeToday;
					this.rechargeYesterday = response.data.rechargeYesterday;
					this.rechargeCurrentMonth = response.data.rechargeCurrentMonth;
					this.allOrders = response.data.allOrders;
					this.toDelivered = response.data.toDelivered;
					this.toReceived = response.data.toReceived;
					this.completed = response.data.completed;
					this.userCount = response.data.userCount;
					this.todayAddUser = response.data.todayAddUser;
					this.downloadCount = response.data.downloadCount;
					this.newUserCount = response.data.newUserCount;
					this.oldUserCount = response.data.oldUserCount;
					this.yesterdayAddUser = response.data.yesterdayAddUser;
					this.currentMonthAddUser = response.data.currentMonthAddUser;
					this.monthDays = response.data.monthDays;
					this.monthPrices = response.data.monthPrices;
					this.registerUsercCounts = response.data.registerUsercCounts;
					this.downloadAPPCounts = response.data.downloadAPPCounts;
					this.onLineNewUserCounts = response.data.onLineNewUserCounts;
					this.onLineOldUserCounts = response.data.onLineOldUserCounts;
					this.dateTimes = response.data.dateTimes;
					this.loading = false;
				});
			},
			// 导航到公告页面
			navigateToNotice() {
				this.$router.push({
					path: "notice"
				});
			},
			// 导航到房源管理页面
			navigateToRoom() {
				this.$router.push({
					path: "/room"
				});
			},
			// 导航到告警页面
			navigateToWarning() {
				this.$router.push({
					path: "/waringlist"
				});
			},
			// 导航到人员监控页面
			navigateToMonitor() {
				this.$router.push({
					path: "/monitor"
				});
			},
			// 导航到开门方式统计页面
			navigateToOpenMethod() {
				this.$router.push({
					path: "/openmethod"
				});
			},
			// 导航到性别分布页面
			navigateToGenderDistribution() {
				this.$router.push({
					path: "/gender"
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.app-container {
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		position: relative;
		overflow: hidden;
	}

	.dashboard {
		height: 100%;
		padding: 16px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.dashboard-row {
			display: flex;
			gap: 16px;

			.dashboard-card {
				flex: 1;
				background: #fff;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				display: flex;
				flex-direction: column;
				overflow: hidden;
				position: relative;

				&.is-fullscreen {
					position: fixed;
					top: 0;
					left: 0;
					width: 100vw;
					height: 100vh;
					z-index: 2000;
					margin: 0;
					padding: 0;
					border-radius: 0;

					.section-header {
						padding: 16px;
						background: #fff;
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
					}

					.card-content {
						height: calc(100% - 72px);
						padding: 16px;
					}
				}
			}

			&.top-row {
				height: calc(55% - 8px);
				min-height: 380px;
			}

			&.bottom-row {
				height: calc(45% - 8px);
				min-height: 320px;
			}
		}
	}

	.section-header {
		padding: 16px 16px 12px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);

		.title-wrapper {
			display: flex;
			align-items: center;
			flex: 1;

			i {
				color: #1890ff;
				font-size: 18px;
				margin-right: 8px;
			}

			span {
				color: #303133;
				font-size: 16px;
				font-weight: 500;
			}
		}

		.header-actions {
			display: flex;
			align-items: center;
			gap: 12px;

			.fullscreen-btn {
				color: #909399;
				font-size: 16px;
				cursor: pointer;
				padding: 4px;
				transition: all 0.3s;

				&:hover {
					color: #1890ff;
				}
			}

			.more-link {
				color: #1890ff;
				font-size: 13px;
				cursor: pointer;
				display: flex;
				align-items: center;

				&:hover {
					color: #66b1ff;
					i {
						transform: translateX(2px);
					}
				}

				i {
					margin-left: 4px;
					transition: transform 0.3s;
				}
			}
		}
	}

	.card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 16px;
		overflow: hidden;
		position: relative;

		> * {
			height: 100%;
			width: 100%;
		}
	}

	// 设备电量分布样式
	.battery-dashboard {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.battery-distribution {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 8px 0;
		gap: 8px;
	}

	.battery-item {
		display: flex;
		align-items: center;
		padding: 12px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		flex: 1;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
		}

		&.high {
			border-left: 4px solid #67c23a;
			.battery-level {
				background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
			}
		}

		&.medium {
			border-left: 4px solid #e6a23c;
			.battery-level {
				background: linear-gradient(90deg, #e6a23c 0%, #f0ad4e 100%);
			}
		}

		&.low {
			border-left: 4px solid #f56c6c;
			.battery-level {
				background: linear-gradient(90deg, #f56c6c 0%, #f78989 100%);
			}
		}

		&.very-low {
			border-left: 4px solid #f56c6c;
			background: rgba(245, 108, 108, 0.1);
			.battery-level {
				background: linear-gradient(90deg, #f56c6c 0%, #f78989 100%);
			}
		}
	}

	.battery-visual {
		margin-right: 16px;
	}

	.battery-icon {
		position: relative;
		display: flex;
		align-items: center;

		.battery-body {
			width: 40px;
			height: 20px;
			border: 2px solid #ddd;
			border-radius: 3px;
			position: relative;
			background: #f5f5f5;
			overflow: hidden;

			.battery-level {
				height: 100%;
				border-radius: 1px;
				transition: width 0.5s ease;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
					animation: shimmer 2s infinite;
				}
			}
		}

		.battery-tip {
			width: 3px;
			height: 8px;
			background: #ddd;
			border-radius: 0 2px 2px 0;
			margin-left: 2px;
		}
	}

	.battery-details {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.battery-label {
			font-size: 14px;
			color: #606266;
			font-weight: 500;
			flex: 1;
		}

		.battery-count {
			font-size: 16px;
			font-weight: 600;
			color: #303133;
			margin-right: 12px;
		}

		.battery-percent {
			font-size: 12px;
			color: #909399;
			background: rgba(0, 0, 0, 0.05);
			padding: 2px 8px;
			border-radius: 10px;
			font-weight: 500;
		}
	}

	@keyframes shimmer {
		0% { transform: translateX(-100%); }
		100% { transform: translateX(100%); }
	}

	.panel-subtitle {
		font-size: 12px;
		color: #909399;
		font-weight: 400;
	}

	// 响应式布局优化
	@media (max-width: 1400px) {
		.dashboard {
			padding: 12px;
			gap: 12px;

			.dashboard-row {
				gap: 12px;
			}
		}
	}

	@media (max-width: 1200px) {
		.dashboard {
			.dashboard-row {
				&.top-row {
					height: auto;
					flex-wrap: wrap;

					.dashboard-card {
						flex: 1 1 calc(50% - 6px);
						min-height: 300px;

						&:last-child {
							flex: 1 1 100%;
							margin-top: 12px;
						}
					}
				}

				&.bottom-row {
					height: auto;
					min-height: 280px;
				}
			}
		}
	}

	@media (max-width: 768px) {
		.dashboard {
			padding: 8px;
			gap: 8px;

			.dashboard-row {
				flex-direction: column;
				gap: 8px;

				.dashboard-card {
					min-height: 250px;
				}

				&.top-row .dashboard-card {
					flex: 1 1 auto;
					margin-top: 0;
				}
			}
		}
	}
</style>


